<template>
	<!-- 天气栏 -->
	<view class="weather">
		<!-- 左边显示天气 -->
		<view class="weatherleft">
			<text>18°C</text>
			<text>温度变化: 16~19°C</text>
			<text>湿度: 98%</text>
		</view>
		<!-- 右边显示地区 -->
		<view class="arearight">
			<text>当前城市: 杭州</text>
		</view>
	</view>


	<!-- 内容 轮播图 1 -->
	<up-swiper :list="list1" indicator indicatorMode="line" circular></up-swiper>

	<!-- gap横线 -->
	<up-gap height="10" bgColor="#f3f3f3"></up-gap>

	<!-- 农场咨询 -->
	<view class="inquire">
		<!-- 农场咨询 -->
		<view class="inquireleft">
			<text class="one">农 场</text>
			<br>
			<text>资 讯</text>
		</view>
		<!-- 显示新闻，新闻可以点击跳转 -->
		<view class="newright">
			<view class="news-item" @click="onNewsClick(1)">
				<u-tag type="success" size="small" class="news-tag">动态</u-tag>
				<text class="news-title">干货 | 认养农业：操作简单，赚钱快...</text>
			</view>
			<view class="news-item" @click="onNewsClick(2)">
				<u-tag type="warning" size="small" class="news-tag">新闻</u-tag>
				<text class="news-title">农业发展新模式——认养农业</text>
			</view>
		</view>
	</view>


	<up-gap height="3" bgColor="#ffffff"></up-gap>
	
	<!-- 内容 网一共8个格 -->
	<up-grid :border="false" col="4">
		<up-grid-item v-for="(item, index) in gridItems" :key="index" @click="navigateTo(item.path)">
			<image :src="item.icon" class="icon"></image>
			<text>{{ item.text }}</text>
		</up-grid-item>
	</up-grid>

	<!-- <up-toast ref="uToastRef" /> -->
	<up-gap height="5" bgColor="#ffffff"></up-gap>
	<!-- <up-gap height="3" bgColor="#f3f3f3"></up-gap> -->
	<!-- 放置每日生鲜   限时特价  的图片 -->
	<view class="u-page">
		<image src="/static/shuiguo.png" />
	</view>

	<up-gap height="3" bgColor="#f3f3f3"></up-gap>

	<!-- 新闻视频  一行-->
	<view>
		<!-- 贴一个黑色背景 -->
		<view style="background-color: black; height: 170px;"></view>
	</view>

<!-- 	<up-tabbar :value="value99" @change="change99" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" activeColor="#6bc493">
		<up-tabbar-item text="首页" icon="/static/shou.png"></up-tabbar-item>
		<up-tabbar-item text="空闲地" icon="/static/de.png" to="/pages/land/index"></up-tabbar-item>
		<up-tabbar-item text="我的土地" icon="/static/fa.png"></up-tabbar-item>
		<up-tabbar-item text="商城" icon="/static/shop.png"></up-tabbar-item>
		<up-tabbar-item text="我的" icon="/static/ren.png"></up-tabbar-item>
	</up-tabbar> -->
	<!-- 底部导航栏 -->
	<bottomVue></bottomVue>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		route
	} from '@/node_modules/uview-plus';

    import bottomVue from '@/component/bottom.vue';
	// 内容 轮播图 1
	const list1 = ref([
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
	]);

	// 网格内容数据
	// 定义格子项目
	const gridItems = reactive([
	  { icon: '/static/lang2.png', text: '土地', path: '/pages/land/index' },
	  { icon: '/static/zhong.png', text: '土地种植', path: '/land-planting' },
	  { icon: '/static/sping.png', text: '视频监控', path: '/pages/monitor/index' },
	  { icon: '/static/cong.png', text: '害虫识别', path: '/farm-market' },
	  { icon: '/static/ce.png', text: '土壤检测', path: '/farm-activity' },
	  { icon: '/static/xue.png', text: '农技学习', path: '/pages/study/index' },
	  { icon: '/static/sang.png', text: '商业', path: '/agriculture-study' },
	  { icon: '/static/feng.png', text: '附近农场', path: '/nearby-farms' },
	]);
	// 跳转方法
	const navigateTo = (url) => {
	  uni.navigateTo({
	    url,
	    fail: (err) => {
	      console.error('Failed to navigate:', err);
	    },
	  });
	};
	// 新闻跳转
	const onNewsClick = (newsId) => {
		console.log(`点击了新闻项 ${newsId}`);
		// 页面跳转逻辑，使用 Vue Router 进行跳转
		// router.push({ path: `/pages/newsDetail/index`, query: { id: newsId } });
	};
</script>

<style lang="scss">
	.icon {
		width: 40px;
		height: 40px;
		margin-bottom: 5px;
	}

	.weather {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #00C853;
		padding: 10px;
		color: white;
		font-size: 14px;
	}

	.weather .weatherleft {
		display: flex;
		flex-direction: row;
		/* 改为水平排列 */
		gap: 15px;
		/* 设置子元素之间的间距 */
	}

	.weather .arearight {
		font-size: 15px;
	}

	.inquire {
		background-color: #ffffff;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.inquireleft {
			font-size: 20px;
			font-weight: bold;
			border-right: 1px solid #f3f3f3;
			/* 设置右边的分隔线 */
			// box-shadow: 0 0 5px #f3f3f3;
			/* 使用模糊的阴影来模拟模糊效果 */
			padding-right: 15px;
			/* 给文本右侧留一点内边距，让竖线和文本之间有空隙 */
			font-family: sans-serif;
		    // 字体倾斜
			font-style: italic;
		}
        .one{
			color: #00C853;
			
		}
		.newright {
			margin-top: 10px;
		}

		.news-item {
			display: flex;
			align-items: center;
			/* 垂直居中对齐 */
			margin-bottom: 8px;
			/* 每个新闻项之间的间距 */
		}

		.news-tag {
			margin-right: 10px;
			/* 标签和新闻标题之间的间距 */
		}

		.news-title {
			color: #333;
			/* 新闻标题的颜色 */
			font-size: 14px;
		}
	}

	.up-grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		img {
			width: 40px;
			height: 40px;
		}

		.text {
			margin-top: 5px;
			font-size: 14px;
		}
	}

.u-page {
    background-color: #ffffff;
    padding: 10px;
    text-align: center;
}

.u-page image {
    width: 100%;
    height: 170px;
}

	.up-tabbar {
		background-color: #ffffff;
		border-top: 1px solid #e6e6e6;

		.up-tabbar-item {
			color: #888;

			&.active {
				color: #6bc493;
			}
		}
	}
</style>